<template>
  <div>
    <div class="outDiv">
      <scroller lock-x>
        <div>
          <go-back :aa="preurl" :bb='backTypeId' :routeName="backTypeId" :white="true"></go-back>
          <div class="main">
            <div class="title">
              <h3>{{ majorName }}</h3>
              <p>{{ typeName + ' / ' + catalogName }}</p>
              <p>专业代码 {{ majorCode }}</p>
              <!-- <p>专业代码 {{ majorCode }} / 学制 四年</p> -->
            </div>
            <div class="content">
              <div class="introduceStep">
                <div class="left">
                  <!-- <div class="topLine" :style="index == 0 ? 'background: transparent' : 'background: #E5E8ED'"></div> -->
                  <div class="topLine" style="background: transparent;"></div>
                  <div class="circle"></div>
                  <div class="bottomLine"></div>
                </div>
                <div class="right">
                  <div class="itemTitle">专业介绍</div>
                  <p class="describe">{{ information }}</p>
                </div>
              </div>
              <div class="introduceStep">
                <div class="left">
                  <div class="topLine" style="background: #E5E8ED;"></div>
                  <div class="circle"></div>
                  <div class="bottomLine"></div>
                </div>
                <div class="right">
                  <div class="itemTitle">开设课程</div>
                  <p class="describe">{{ kskc }}</p>
                </div>
              </div>
              <div class="introduceStep">
                <div class="left">
                  <div class="topLine" style="background: #E5E8ED;"></div>
                  <div class="circle"></div>
                  <div class="bottomLine"></div>
                </div>
                <div class="right">
                  <div class="itemTitle">培养目标</div>
                  <p class="describe">{{ pymb }}</p>
                </div>
              </div>
              <div class="introduceStep">
                <div class="left">
                  <div class="topLine" style="background: #E5E8ED;"></div>
                  <div class="circle"></div>
                  <div class="bottomLine"></div>
                </div>
                <div class="right">
                  <div class="itemTitle">培养要求</div>
                  <p class="describe">{{ pyyq }}</p>
                </div>
              </div>
              <div class="introduceStep">
                <div class="left">
                  <div class="topLine" style="background: #E5E8ED;"></div>
                  <div class="circle"></div>
                </div>
                <div class="right">
                  <div class="itemTitle">对口岗位</div>
                  <p class="describe">{{ dkgw }}</p>
                </div>
              </div>
            </div>
          </div>
        </div>
      </scroller>
    </div>
  </div>  
</template>

<script>
import goBack from '~/components/goBack'
import axios from '~/plugins/axios';
import ls from 'store2';
export default {
  components: {
    goBack,
  },
  mounted() {
    const type = this.$route.query.type.code;
    this.backTypeId = this.$route.query.type.typeId;
		console.log('backTypeId',this.backTypeId)
    this.getDetail(type);
			if(this.commonJs.isTerminal()=='isAndroid'){
				if (window.history && window.history.pushState) {
				history.pushState(null, null, document.URL);
				window.addEventListener('popstate', this.fun, false); //false阻止默认事件 
			}
			}
  },
			
destroyed: function () {
			window.removeEventListener('popstate', this.fun, false); 
			// this.commonJs.xahui('../volunteer/balance',this.backTypeId)
		},

  data() {
    return {
      preurl:ls.get('preUrl'),
      information: '', //专业介绍
      kskc: '', // 开设课程
      pymb: '', // 培养目标
      pyyq: '', // 培养要求
      dkgw: '', // 对口岗位
      majorCode: '', // 专业代码
      majorName: '', // 专业名称
      typeName: '',
      catalogName: '',
      backTypeId: '',
    }
  },
  methods: {
		fun() {
			this.$router.replace({
				path: '../volunteer/programme',
				query: {
					type: this.backTypeId
				}
		
			})
		
		},
    getDetail(typeId) {
			this.$vux.loading.show({text:"正在加载"});
      axios.post('https://app.sx985.com/api/major/getmajor', { major_code: typeId }).then(res => {
        if (res.code == 200) {
          const data = res.data;
          this.information = data.information;
          this.kskc = data.kskc;
          this.pymb = data.pymb;
          this.pyyq = data.pyyq;
          this.dkgw = data.dkgw;
          this.majorCode = data.major_code;
          this.majorName = data.major_name;
          this.typeName = data.type_name;
          this.catalogName = data.catalog_name;
					setTimeout(()=>{
						this.$vux.loading.hide();
					},20)
					
        }
      })
    },
  },
}
</script>

<style lang="less" scoped>
  .outDiv {
    width: 100%;
    height: 100vh;
    .main {
      .title {
        padding: 0.32rem;
        background: #FFF;
        margin-bottom: 0.24rem;
        h3 {
          font-size: 0.36rem;
          font-weight: bold;
          color: #222;
          line-height: 0.57rem;
          margin-bottom: 0.32rem;
        }
        p {
          margin-top: 0.16rem;
          color: #999;
          font-size: 0.24rem;
        }
      }
      .content {
        background: #FFF;
        padding: 0.48rem 0.32rem 0.66rem;
        .introduceStep {
          display: flex;
          justify-content: flex-start;
          align-items: stretch;
          .left {
            width: 0.12rem;
            display: flex;
            flex-direction: column;
            align-items: center;
            .topLine {
              width: 1px;
              height: 0.14rem;
              background: #E5E8ED;
            }
            .circle {
              width: 0.12rem;
              height: 0.12rem;
              border-radius: 50%;
              background: #E5E8ED;
            }
            .bottomLine {
              width: 1px;
              background: #E5E8ED;
              flex: 1;
            }
          }
          .right {
            margin-left: 0.32rem;
            padding-right: 0.12rem;
            padding-bottom: 0.48rem;
            width: 100%;
            .itemTitle {
              color: #80D566;
              font-size: 0.28rem;
              font-weight: bold;
              line-height: 0.4rem;
              margin-bottom: 0.24rem;
            }
            .describe {
              font-size: 0.28rem;
              color: #222;
              line-height: 0.44rem;
            }
          }
        }
      }
    }
  }
</style>
